<template>
	<view>
		<UserInfoCard></UserInfoCard>
		<view class="day-bg">
			<view class="">
				<view class="between-center">
					<view class="start-center">
						<image class="img-pat-info" src="/static/images/imgs/zhuyuanqingdan-patinfo.png"></image>
						<view class="pat-info-title">住院人信息</view>
					</view>
					<view class="patientType-1" v-if="item.patientType==1">未入院</view>
					<view class="patientType-2" v-if="item.patientType==2">住院中</view>
					<view class="patientType-3" v-if="item.patientType==3">已出院</view>
				</view>
				<view>
					<view class="start-center">
						<view class="item-title">住院患者</view>
						<view>{{item.patName}}</view>
					</view>
					<view class="start-center">
						<view class="item-title">住院号</view>
						<view>{{item.admissionNo}}</view>
					</view>
					<!-- 					<view class="start-center">
						<view class="item-title">床位号</view>
						<view>{{item.bedNo}}</view>
					</view> -->
					<view class="start-center">
						<view class="item-title">住院院区</view>
						<view>{{item.birthPlace}}</view>
					</view>
					<view class="start-center">
						<view class="item-title">住院科室</view>
						<view>{{item.deptName}}</view>
					</view>
					<view class="start-center">
						<view class="item-title">住院病区</view>
						<view>{{item.theHospitalWard}}</view>
					</view>
					<view class="start-center">
						<view class="item-title">入院日期</view>
						<view>{{item.inHospitalTime}}</view>
					</view>
					<view class="start-center">
						<view class="item-title">出院日期</view>
						<view>{{item.outHospitalTime}}</view>
					</view>
					<view class="start-center">
						<view class="item-title">住院天数</view>
						<view>{{item.inDays+1}}</view>
					</view>
					<view class="center">
						<view class="border-row"></view>
					</view>
					<view class="flex-end mar-5-0">
						<view>费用合计：</view>
						<view class="color-red">￥{{item.totalAmount}}</view>
					</view>
				</view>
			</view>

		</view>
		<view class="day-detail pad-16r">
			<view class="pat-day-list start-center ">
				<image class="img" src="/static/images/imgs/day-detail-list.png"></image>
				<view class="pat-info-title">每日费用清单</view>
			</view>
			<view class="pad-16r">
				<view v-for="(item,index) in dataSource" :key="index">
					<view class="between-center list-row" @click="toPage(item)">
						<view>{{item.day}}</view>
						<view class="start-center">
							<view>{{item.money}}</view>
							<u-icon name="arrow-right" class="mar-0-5"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<LoadVue :load="load"></LoadVue>
	</view>
</template>

<script>
	import UserInfoCard from '../../../components/UserInfo/UserInfoCard.vue'
	import {
		dateFormat,
		getDaysBetweenDates
	} from '../../../utils/assist'
	import {
		inHospitalBeInlist
	} from '../../../api/inHospital'
	import {
		mapGetters,
	} from 'vuex'
	export default {
		components: {
			UserInfoCard,
		},
		computed: {
			...mapGetters(["userInfo"]),
		},
		data() {
			return {
				item: {},
				dataSource: [],
				load: false,
			}
		},
		onLoad(e) {

			if (e.item) {
				this.item = JSON.parse(e.item)
				console.log(this.item)
				this.item.inHospitalTime = dateFormat("yyyy-MM-dd", new Date(this.item.inHospitalTime))
				this.item.outHospitalTime = dateFormat("yyyy-MM-dd", new Date(this.item.outHospitalTime))
				this.item.inDays = getDaysBetweenDates(this.item.inHospitalTime, this.item.outHospitalTime)
				this.init()
			}

		},
		methods: {
			init() {
				this.load = true;
				inHospitalBeInlist({
					patId: this.item.patId,
					iptCount: this.item.iptCount
				}).then(res => {
					// console.log(res)
					let map = new Map();
					res.forEach(item => {
						let createTime = item.createTime.split(" ")[0]
						// console.log(createTime)
						// let a = map.get(createTime)
						// let money = parseFloat(item.feeItemMoney)
						// if (a) {
						// 	money += a;
						// } 
						// map.set(createTime, money);
						let list = []
						// let obj = {}
						let obj = map.get(createTime)
						let money = parseFloat(item.feeItemMoney)
						if (obj) {
							list = obj.list
							money += obj.money
						} else {
							obj = {}
						}
						list.push(item)
						obj.list = list;
						obj.money = money;
						map.set(createTime, obj)
					})
					// console.log(map)
					map.forEach((v, k) => {
						this.dataSource.push({
							day: k,
							money: v.money.toFixed(2),
							item: this.item,
							list: v.list
						})
					})
				}).finally(() => {
					this.load = false
				})
			},
			toPage(item) {
				uni.navigateTo({
					url: `/pages/Home/ServeHospital/InHospitalListDetailDay?item=` + JSON.stringify(item)
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.day-bg {
		margin-top: 16rpx;
		background-image: url("/static/images/imgs/zhuyuanqingdan-day-bg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 30px 16px 20px 16px;
	}

	.pat-info-title {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 500;
		font-size: 16px;
		color: #333333;
		line-height: 16px;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin: 5px;
	}

	.img-pat-info {
		width: 20px;
		height: 20px;
	}

	.list-name {
		width: 30%;
	}

	.border-row {
		width: 90%;
		margin: 10px 0;
	}

	.patientType-1 {
		background: rgb(153, 153, 153);
		padding: 3px 20px;
		border-radius: 16px;
		color: white;
	}

	.patientType-2 {
		background: rgb(252, 80, 68);
		padding: 3px 20px;
		border-radius: 16px;
		color: white;
	}

	.patientType-3 {
		background: #b7bdbc;
		padding: 3px 20px;
		border-radius: 16px;
		color: white;
	}

	.img {
		width: 20px;
		height: 20px;
		margin: 5px;
	}

	.day-detail {
		background-image: url("/static/images/imgs/day-detail.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-top: -20px;
	}

	.pat-day-list {
		margin-top: 20px;
	}

	.day-detail-title {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 500;
		font-size: 20px;
		line-height: 40px;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.list-row {
		background-color: rgb(246, 246, 246);
		border-radius: 16px;
		margin: 10px 0;
		line-height: 50px;
		padding: 0 20px;
	}
</style>